[程式碼&DEMO] [HackMD完整筆記]

目標

使用HTML5中的Canvas製作一個繪畫板，透過滑鼠鼠標來畫出彩色不同粗細的線條。

步驟流程

STEP1.
STEP2.
STEP3.

學習筆記

Canvas

• 渲染環境(rendering context)
  一開始canvas為空白，程式碼腳本需先存取渲染環境，在上面繪圖，然後才會顯現影像

  • getContext( ):此方法可以取得渲染環境及其繪圖函數(function),參數只有渲染環境類型一項。
    Example:
    2D繪圖，就是輸入”2d”。

  const canvas = document.querySelector('#draw');
  const ctx = canvas.getContext('2d');
  

• 線條的樣式

  • strokeStyle: 線條描邊的顏色。
  • lineWidth: 線條的寬度。
  • lineJoin: 線條與線條接合處樣式。有三種：round/bevel/miter(預設)。
    
    [圖片來源:MDN-Canvas_API]
  • lineCap: 線條的結束樣式。有三種:butt(預設)/round/square。
    
    [圖片來源:MDN-Canvas_API]
  • fillStyle：填充的顏色。

• 移動順序

  • beginPath( ): 新建一條繪製路徑。
  • stroke( ): 繪製路徑的輪廓。
  • moveTo( ): 將筆觸(繪製路徑的起點)移動到指定的座標中。
  • lineTo( ): 繪製一條從當前位置到指定座標的路徑。

更多可以參閱:https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API

HSL-彩虹漸變顏色

H（hue）:色相(色調)，值為0〜360。
S: 飽和度，值為0〜1。
L: 亮度，值為0〜1，或百分比。